/*
    Tsx
*/

function TestOne() {
    // 1、插值语法 tsx  {}  支持 字符串 数组(普通类型) 元素 三元表达式 方法调用
    // 2、tsx  {}  不支持 对象 ，如果要展示需要序列化
    // 3、事件绑定 事件名称驼峰命名法 onClick 等， 如果需要传参，使用高阶函数
    // 4、支持函数泛型  不能直接写 <T> ,会被理解成元素，纠正要加一个逗号 <T,>
    // 5、绑定属性 id class style等等  id 直接使用 {id}绑定   
    // 6、动态绑定class  class 使用 className   绑定多个class
    // 7、绑定style  style 使用 style={{}}  注意：style 属性值是一个对象
    // 8、添加html代码片段， 需要使用dangerouslySetInnerHTML={{__html: 'html片段'}}  注意：html片段需要转义
    // 9、遍历数组， 使用 map  注意：需要添加key
    let num = 3.1415926
    // let fn = () => { 
    //     console.log('click') 
    // }
    // let fn = (cans: string, event: any) => { 
    //     console.log(cans) 
    //     console.log(event) 
    // }
    let fn = <T,>(cans: T, event: any) => { 
        console.log(cans) 
        console.log(event) 
    }
    let id = 'dom'
    let clazz = 'test'
    let style = {color: 'red'}
    return (
        <>
            <div>{[1,2,3]}</div>
            <div>{num.toFixed(2)}</div>
            <div>{1 == 1 ? 'yes' : 'no'}</div>
            <div>{[1,2,3].map(item => <div key={item}>{item}</div>)}</div>
            {/* <button onClick={fn}></button> */}
            {/* <button onClick={() => fn('hello')}></button> */}
            <button onClick={(e) => fn('hello', e)}></button>
            <div id={id}>属性</div>
            <div className={`${clazz} aa bb`}>属性class</div>
            <div style={style}>属性style</div>
            <div style={{color: 'blue'}}>属性style</div>
        </>
    )
}

export default TestOne